<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作日志图标展示</title>
    <!--引入echarts-->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.4.1.min.js"></script>
</head>
<body>
年：<select id="yselect" ></select>
月：<select id="mselect"><option >1</option><option>2</option><option>3</option><option>4</option>
    <option>5</option><option>6</option><option>7</option><option>8</option>
    <option>9</option><option>10</option><option>11</option><option>12</option></select>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<!--引入jquery-->

<script type="text/javascript">
   //  alert(1111);
     let date = new Date();
     let currYear = date.getFullYear();
     let currMonth = date.getMonth()+1;
     //动态添加下拉年份
     for (let i = currYear-4; i <= currYear; i++) {
         $("#yselect").append("<option>"+i+"</option>");
     }
     //赋予默认值
     $("#yselect").val(currYear);
     $("#mselect").val(currMonth);
     //当年改变时触发
     $("#yselect").change(function(){
         showOperLogChart($(this).val(),$("#mselect").val());
     });
     //当月改变时触发
     $("#mselect").change(function(){
         showOperLogChart($("#yselect").val(),$(this).val());
     });

     //初始化方法，默认当前年月
     showOperLogChart(currYear,date.getMonth()+1);
     // 展示图标方法
    function showOperLogChart(year,month){
        let xdata = [];
        let addData = [];
        let updateData = [];
        let delData = [];

        $.ajax({
            url: "/operLog/queryShowChartData",
            type: "GET",
            async:false,//false为同步，必须响应代码执行完毕，才会执行该请求下面的代码，如果是true或者不写都是异步
            data: {year:year,month:month},
            dataType: "json",
            success: function (resp) {
                //alert(3333);
                if (resp.code == 0) {
                    let data = resp.data;

                    for (let i = 0; i < data.length; i++) {
                        xdata.push(data[i].day);
                        addData.push(data[i].addcount);
                        updateData.push(data[i].updatecount);
                        delData.push(data[i].delcount);
                    }
                }
            },
            error: function (e) {
                layer.msg("请求失败");
            }
        });
        //alert(2222);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '操作日志分析图',
                subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['添加操作', '更新操作','删除操作']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xdata
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    name: '添加操作',
                    type: 'line',
                    data: addData,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name: '更新操作',
                    type: 'line',
                    data: updateData,
                    markPoint: {
                        data: [
                            {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'},
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            }, {
                                symbol: 'circle',
                                label: {
                                    position: 'start',
                                    formatter: '最大值'
                                },
                                type: 'max',
                                name: '最高点'
                            }]
                        ]
                    }
                }, {
                    name: '删除操作',
                    type: 'line',
                    data: delData,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    };

</script>
</body>
</html>